<template>
  <div class="earning-box">
    <div class="header">
      <div class="item">
        <div class="money">{{ statisticsObj.totalMoney }}</div>
        总收益(元)
      </div>
      <div class="item">
        <div class="money">{{ statisticsObj.totalCurrentMoney }}</div>
        当天收益(元)
      </div>
      <div class="item">
        <div class="money">{{ statisticsObj.withdrawMoney }}</div>
        已提现金额(元)
      </div>
      <div class="item">
        <div class="money">{{ statisticsObj.canEarningsMoney }}</div>
        可提现金额(元)
      </div>
    </div>
    <c-table
      ref="cTable"
      selection
      hasBorder
      :max-height="680"
      :size="size"
      :loading="isLoading"
      :table-header="tableHeader"
      :table-list="tableList"
      :table-inner-btns="tableInnerBtns"
      :page-info="pageInfo"
      @change-pagination="changePagination"
    >
      <template v-slot:header>
        <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
      </template>
    </c-table>
  </div>
</template>

<script>
import mixinTable from 'mixins/table'
import dictObj from '@/store/dictData'
import utils from 'utils'

export default {
  name: 'dispatcherEarnings',
  mixins: [mixinTable],
  props: {
    initData: {
      type: Object,
      default() {
        return []
      }
    }
  },
  data(vm) {
    return {
      statisticsObj: {},
      dispatcherId: '',
      // 对话框对象
      dialogObj: {},
      // 表格内操作按钮
      tableInnerBtns: [],
      tableHeader: [
        {
          label: '订单号',
          prop: 'orderId',
          width: 270,
          fixed: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '所属企业',
          prop: 'companyName',
          width: 180
        },
        {
          label: '订单类型',
          prop: 'orderType',
          formatter: row => row && vm.setTableColumnLabel(row.orderType, 'orderTypeList'),
          search: {
            type: 'dict',
            optionsList: dictObj.orderTypeList
          }
        },
        {
          label: '车牌',
          prop: 'carNumber'
        },
        {
          label: '会员姓名',
          prop: 'customerName'
        },
        {
          label: '会员手机号',
          prop: 'customerPhone',
          formatter: row => row && utils.hidePhoneNum(row.customerPhone)
        },
        {
          label: '总收益金额(元)',
          prop: 'totalPayMoney',
          formatter: row => row && utils.formatMoney(row.totalPayMoney),
          width: 120
        },
        {
          label: '时租或套餐内收益(元)',
          prop: 'firstPayMoney',
          formatter: row => row && utils.formatMoney(row.firstPayMoney),
          width: 160
        },
        {
          label: '套餐外收益(元)',
          prop: 'secondPayMoney',
          formatter: row => row && utils.formatMoney(row.secondPayMoney),
          width: 130
        },
        {
          label: '总行驶里程(KM)',
          prop: 'totalMileage',
          width: 130
        },
        {
          label: '总行时长(分钟)',
          prop: 'totalMinute',
          width: 120
        },
        {
          label: '开始时间',
          prop: 'beginTime',
          width: 160
        },
        {
          label: '结束时间',
          prop: 'endTime',
          width: 160
        },
        {
          label: '创建时间',
          prop: 'createTime',
          width: 160
        }
      ]
    }
  },
  created() {
    const { id } = this.initData
    this.dispatcherId = id
    this.fetchData()
    this.queryDispatcherStatistics()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime, 'dateTime')
      this.isLoading = true
      this.$api.vehicle
        .fetch('queryDispatcherCarEarnings', {
          ...searchDate,
          ...other,
          dispatcherId: this.dispatcherId,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    queryDispatcherStatistics() {
      this.$api.vehicle
        .fetch('dispatcherStatistics', {
          id: this.dispatcherId
        })
        .then(res => {
          const { totalCurrentMoney, totalMoney, withdrawMoney, canEarningsMoney } = res
          this.statisticsObj = {
            totalMoney: utils.formatMoney(totalMoney),
            totalCurrentMoney: utils.formatMoney(totalCurrentMoney),
            withdrawMoney: utils.formatMoney(withdrawMoney),
            canEarningsMoney: utils.formatMoney(canEarningsMoney)
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
.earning-box {
  .header {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 20px;
      font-size: 14px;
      color: @content-color;
      border: 1px solid @primary-color;
      border-radius: 10px;
      .money {
        font-size: 26px;
        color: @danger;
      }
    }
  }
}
</style>
